<template>
	<!-- <view class="inline-flex"> -->
		<!-- <view class="inline-flex">
			{{ formater && formater(year, month, day) || `${year}-${month}-${day} ${hour}:${min}:${sec}` }}
		</view> -->
		<!-- <slot>
			<view class="inline-flex">
				{{ formater && formater(year, month, day) || `${year}-${month}-${day} ${hour}:${min}:${sec}` }}
			</view>
		</slot> -->
		<uni-popup ref="popup" type="bottom">
			<view class="uni-bg-white">
				<view class="flex justify-between item-center h-40" style="border-bottom:1px solid #f5f5f5;">
					<text class="text-color-hint p-10" @click="onCancel">取消</text>
					<text class="color-primary p-10" @click="onConfirm">确定</text>
				</view>
				<picker-view class="w-screen" :value="value" indicator-style="line-height:34px;" style="height:170px;" @change="onChange">
					<picker-view-column>
						<view class="text-center" style="line-height:34px;" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="text-center" style="line-height:34px;" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="text-center" style="line-height:34px;" v-for="(item,index) in days" :key="index">{{item}}日</view>
					</picker-view-column>
					<picker-view-column>
						<view class="text-center" style="line-height:34px;" v-for="(item,index) in hours" :key="index">{{item}}时</view>
					</picker-view-column>
					<picker-view-column>
						<view class="text-center" style="line-height:34px;" v-for="(item,index) in mins" :key="index">{{item}}分</view>
					</picker-view-column>
					<!-- <picker-view-column>
						<view class="text-center" style="line-height:100rpx;"  v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column> -->
				</picker-view>
			</view>
		</uni-popup>
	<!-- </view> -->
</template>

<script setup>
	import { ref, computed, onMounted } from 'vue'
	
	const props = defineProps({
		formater: {
			type: Function,
			default: function(year = 0, month = 0, day = 0, hour = 0, min = 0, sec = 0) {
				return `${year}-${month}-${day} ${hour}:${min}:${sec}`
			}
		},
	})
	
	const emits = defineEmits(['confirm'])
	
	const now = new Date()
	const years = ref([])
	const year = ref(now.getFullYear())
	const months = ref([])
	const month = ref(now.getMonth() + 1)
	const days = ref([])
	const day = ref(now.getDate())
	const hours = ref([])
	const hour = ref(now.getHours())
	const mins = ref([])
	const min = ref(now.getMinutes())
	for (let i = 1990; i < now.getFullYear(); i++) {
		years.value.push(i)
	}
	for (let i = 1; i <= 12; i++) {
		months.value.push(i)
	}
	for (let i = 1; i <= 31; i++) {
		days.value.push(i)
	}
	for (let i = 0; i <= 59; i++) {
		hours.value.push(i)
	}
	for (let i = 0; i <= 59; i++) {
		mins.value.push(i)
	}
	
	const value = ref([])
	
	const onChange = (e) => {
		console.log('onChange', e, value.value)
	}
	
	const popup = ref(null)
	const open = () => {
		console.log('open', popup.value)
		popup.value && popup.value.open()
	}
	
	const onConfirm = () => {
		console.log('onConfirm', value.value)
		emits('confirm', {
			year,
			month,
			day,
			hour,
			min,
		})
		onCancel()
	}
	
	const onCancel = () => {
		popup.value && popup.value.close()
	}
	
	defineExpose({
		open,
	})
</script>
